@charset "utf-8";
/**
 * Created by kroyo on 2017/10/19.
 * common  html公共样式
 */



@import 'mixincommon';
@import 'reset';


.reset{
    display: none;
}
.red{
    color: $red;
}
//字体大小   
.font12{
    font-size: $font12;
}
.font14{
    font-size: $font14;
}
.font16{
    font-size: $font16;
}
.font18{
    font-size: $font18;
}
.font24{
    font-size: $font24;
}



body{
    padding-top: 60px;
}

input,textarea,button{
    @include fontfamily();
}
input,textarea{
    @include inputplace(#999999);
    &.active{
        @include inputplace(#666666);
    }
}



.btnafter{
    position:relative;
    &:after{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        background-color: transparent;
        @include transitions(.4s);
    }
    &:hover:after{
        background-color: rgba(255,255,255,0.2);
    }
}


.disabled{
    cursor: not-allowed !important;
    &:after{
        background-color: rgba(255,255,255,0.6);
    }
    &:hover:after{
        background-color: rgba(255,255,255,0.6);
    }
}



//搜索无数据  显示视图
.nodataview{
    width: 100%;
    height: 200px;
    line-height: 200px;
    font-size: 16px;
    color: $s3;
    text-align: center;
}



//必填信息提示
.tink{
    display: none;
    position: absolute;
    left: 89px;
    top: 40px;
    font-size: 14px;
    color: $red;
}


.container{
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}





//site-header start
.site-header{
    width: 100%;
    min-width: 1200px;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: $sf;
    @include transitions(0.5s);
    z-index: 10;
    &.active{
        -webkit-box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
    }
    .container{
        position: relative;
        height: 60px;
    }
    .header-logo{
        float: left;
        width: 122px;
        height: 60px;
        background: url(../../img/logo.png) no-repeat center;
        a{
            display: block;
            width: 100%;
            height: 100%;
            background-color: transparent;
        }
    }
    .header-nav{
        float: left;
        width: 485px;
        height: 100%;
        margin-left: 5px;
        font-size: 14px;
        .nav-list{
            height: 100%;
            padding-left: 20px;
        }
        .nav-item{
            position: relative;
            float: left;
            height: 100%;
            line-height: 60px;
//          margin-left: 25px;
        }
        a{
            display: block;
            width: 100%;
            height: 100%;
            padding: 0 20px;
            color: $s3;
            background-color: transparent;
            @include transitions(0.5s);
            &:after{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                content: '';
                width: 100%;
                height: 4px;
                background-color: $acolor;
                transform-origin: center;
                @include transformt(scale(0,1));
                @include transitions(0.5s);
            }
            &:hover{
                color: $acolor;
                background-color: $se;
                &:after{
                   @include transformt(scale(1,1));
                }
            }
            &.active{
                color: $acolor;
            }
        }
        .nav-more{
            width: 70px;
        }
        .more-list{
            position: relative;
            top: 0;
            left: -10px;
            width: 90px;
            height: 0;
            background-color: #ffffff;
            @include box_shadows(0px,2px,4px,0px,rgba(0, 0, 0, 0.2));
            font-size: 14px;
            color: $s6;
            text-align: center;
            overflow: hidden;
            @include transitions(.4s);
            .item{
                width: 100%;
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                a{
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding: 0 10px;
                    &:after{
                        display: none;
                    }
                }
                &:hover,&.active{
                    a{
                        color: $acolor;
                        background-color: #f2f2f2;
                    }
                }
            }
        }
    }
    .header-search{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }
    .header-login{
        float: right;
        position: relative;
        width: auto;
        height: 60px;
        font-size: 0;
        background-color: #fff;
        z-index: 1;
        .login{
            display: inline-block;
            position: relative;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: $s3;
            font-size: 14px;
            text-align: center;
            background-color: transparent;
            @include transitions(0.5s);
            cursor: pointer;
            a{
                display: block;
                width: 100%;
                height: 100%;
                color: $s3;
                
            }
            a.active{
                color: $acolor;
            }
            &:after{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                content: '';
                width: 100%;
                height: 4px;
                background-color: $acolor;
                transform-origin: center;
                @include transformt(scale(0,1));
                @include transitions(0.5s);
            }
        }
        .y-login{
            display: none;
            position: relative;
//          background: url(../../img/icon-user.png) no-repeat center;
            &:before{
                position: absolute;
                top: 15px;
                right: 20px;
                display: none;
                content: '';
                width: 10px;
                height: 10px;
                background-color: $red;
                @include borradius(50%);
            }
            .icon-user{
                position: absolute;
                top: 15px;
                left: 20px;
                width: 30px;
                height: 30px;
                @include borradius(50%);
                overflow: hidden;
                text-align: center;
                font-size: 0;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .login-user{
            position: relative;
            top: 0px;
            right: 50px;
            width: 120px;
            height: 0;
            background-color: $sf;
            @include box-shadow(0px,5px,8px,0px,rgba(0,0,0,0.2));
            text-align: center;
            overflow: hidden;
            @include transitions(0.5s);
        }
        .user-item{
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: $s6;
            font-size: 14px;
            cursor: pointer;
            @include transitions(0.5s);
            a{
                display: block;
                width: 100%;
                height: 100%;
                color: $s6;
                @include transitions(0.5s);
            }
            .message-num{
                display: inline-block;
                height: 16px;
                line-height: 16px;
                color: $sf;
                font-size: 12px;
                padding-left:5px;
                padding-right:5px;
                background-color: $red;
                @include borradius(8px);
                margin-left: 5px;
                vertical-align:1px;
                text-align: center;
            }
            &:hover{
                color: $acolor;
                background-color: #F2F2F2;
                a{
                    color: $acolor;
                }
            }
        }
        .login:hover{
            color: $acolor;
            background-color: $se;
            &:after{
               @include transformt(scale(1,1));
            }
        }
        .y-login:hover{
//          background-image: url(../../img/icon-user-hover.png);
            &:before{
                display: none;
            }
        }
        //已登录  但没有消息
        .no-message{
            .y-login:before{
                display: none;
            }
            .user-item .message-num{
                display: none;
            }
        }
    }
    .search{
        position: relative;
        float: right;
        overflow: hidden;
        .header-searchbtn{
            position: relative;
            float: left;
            width: 60px;
            height: 60px;
            background: url(../../img/icon-search.png) no-repeat center;
            background-color: #fff;
            z-index:1;
            &:after{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                content: '';
                width: 100%;
                height: 4px;
                background-color: $acolor;
                transform-origin: center;
                @include transformt(scale(0,1));
                @include transitions(0.5s);
            }
            &:hover{
                color: $acolor;
                background-color: $se;
                &:after{
                   @include transformt(scale(1,1));
                }
            }
        }
        .search-type{
            float: left;
            width: 90px;
            height: 60px;
            line-height: 20px;
            padding: 20px 0;
            text-align: center;
            color: $s3;
            font-size: 14px;
            cursor: pointer;
            .type{
                display: block;
                width: 100%;
                padding-right: 15px;
                border-left: 1px solid #dddddd;
            }
            .selectOff{
                position: absolute;
                top: 28px;
                right: 8px;
                display: block;
                width: 12px;
                height: 6px;
                background: url(../../img/icon-down.png) no-repeat center;
                @include transitions(0.4s);
            }
            .type-list{
                display: none;
                position: absolute;
                top: 60px;
                left: 0;
                width: 90px;
                background-color: $sf;
                @include box-shadow(0px,5px,8px,0px,rgba(0,0,0,0.2));
                text-align: center;
                &>div{
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    color: $s3;
                    font-size: 14px;
                    cursor: pointer;
                    @include transitions(0.5s);
                    &:hover,&.active{
                        color: $acolor;
                        background-color: #F2F2F2;
                    }
                }
            }
        }
        .search-type.active{
            .selectOff{
                @include transformt(rotate(180deg));
            }
        }
        .search-text{
            float: left;
            height: 20px;
            margin: 20px 0;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            font-size: 0;
            input{
                height: 100%;
                background-color:transparent;
                padding-left: 10px;
                padding-right: 10px;
                font-size: 14px;
            }
            input.active{
                @include inputplace(#666666);
            }
        }
        .search-type,.search-text{
            position: relative;
            right: -300px;
            @include transitions(1s);
        }
        &.active{
            .search-type,.search-text{
                right: 0;
                opacity: 1;
            }
        }
    }
    .header-pbtn{
        position: relative;
        float: right;
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size:  14px;
        color: $sf;
        text-align: center;
        background-color:$acolor;
        @include borradius(15px);
        margin: 15px 10px;
        cursor: pointer;
        z-index: 1;
    }
    .header-pdemand,.header-pcasebtn a{
        &:after{
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255,255,255,0);
            @include transitions(.4s);
        }
        &:hover:after{
            background-color: rgba(255,255,255,0.3);
        }
    }
    .header-pcasebtn{
//      background-image: url(../../img/icon-service.png);
        a{
            display: block;
            width: 100%;
            height: 100%;
            color: $sf;
        }
    }
    //已登录状态
    &.ylogin{
        .header-nav{
            width: 510px;
            margin-left: 20px;
            .nav-item{
//              margin-left: 30px;
            }
        }
        .header-login{
            width: 70px;
        }
        //已登录
        .no-login{
            display: none;
        }
        .y-login{
            display: block;
            width: 70px;
        }
    }
}
//site-header end






//site-footer start
.site-footer{
    width: 100%;
    min-width: 1200px;
    height: 330px;
    background-color: #292d32;
    &>.container{
        height: 300px;
        padding-top: 20px;
    }
    .site-footer-left{
        width: 500px;
    }
    .footer-links{
        position: relative;
        width: 100%;
        height: 100%;
        font-size: 0;
        margin-bottom: 30px;
        dt{
            color: $sf;
            font-size: 18px;
            line-height: 35px;
        }
        dd,a{
            display: inline-block;
            color: $s9;
            font-size: 14px;
        }
        a{
            padding-right: 25px;
            @include transitions(0.3s);
            &:hover{
                color: $sf;
            }
        }
        .link-downbtn{
            margin-left: 10px;
            cursor: pointer;
            &:after{
                display: inline-block;
                content: '';
                width: 12px;
                height: 8px;
                margin-left: 8px;
                background: url(../../img/indexv2/icon-down.png) no-repeat center;
                vertical-align: 1px;
                transform: rotate(180deg);
                transition: all .4s;
            }
            &.active:after{
                transform: rotate(0);
            }
        }
    }
    .link-list{
        display: none;
        width: 900px;
    }
    .footer-contact{
        width: 500px;
        .contact-phone{
            .tel{
                color: $sf;
                line-height: 35px;
            }
            .time{
                color: $sf;
            }
            a{
                color: $acolor;
                font-size: 24px;
                cursor: default;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
            }
        }
        .contact-address{
            font-size: $font14;
            color: $s9;
            line-height: 26px;
            margin-top: 35px;
        }
    }
    .footer-code{
        width: 138px;
        overflow: hidden;
        font-size: $font14;
        color: $sc;
        text-align: center;
        margin-top: 10px;
        img{
            width: 138px;
            height: 138px;
            margin-bottom: 5px;
        }    
    }
    //site-info start
    .site-info{
        width: 100%;
        min-width: 1200px;
        height: 30px;
        line-height: 30px;
        background-color: #26282b;
        color: $s9;
        font-size: 12px;
        text-align: center;
    }
    //site-info end
}
//site-footer end
















//site-toobar start
.site-toolbar{
    position: fixed;
    right: 0;
    bottom: 160px;
    z-index: 9;
    .toolbar-tool{
        width: 80px;
        background-color:$sf;
        border: 1px solid #dddddd;
        cursor: pointer;
    }
    .toolbar-lineinfo{
        height: 90px;
        text-align: center;
        a{
            display: block;
            width: 100%;
            height: 100%;
            padding-top:10px;
        }
        div{
            width: 37px;
            height: 40px;
            background: url(../../img/icon-lineinfo.png) no-repeat center;
            margin:0 auto;
            @include transitions(0.3s);
        }
        p{
            font-size:$font16;
            color: $s6;
            margin-top: 6px;
            @include transitions(0.3s);
        }
        &:hover{
            div{
                background-image:url(../../img/icon-lineinfo-hover.png) ;
            }
            p{
                color: $acolor;
            }
        }
    }
    .toolbar-topbtn{
        height: 50px;
        background: url(../../img/icon-topbtn.png) no-repeat center;
        background-color:$sf;
        margin-top: 10px;
        @include transitions(0.3s);
        &:hover{
            background-image:url(../../img/icon-topbtn-hover.png) ;
        }
    }
}
//site-toobar end







 //banner
.site-banner{
    position: relative;
    width: 100%;
    min-width: 1200px;
    height: 350px;
    font-size: 0;
    text-align: center;
    overflow: hidden;
    background-color: #8F8F8F;
    .swiper-slide{
        overflow: hidden;
        a{
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    }
    img{
        //相对完全居中法
        position: absolute;
        left: -9999px;
        right: -9999px;
        top: -9999px;
        bottom: -9999px;
        margin:auto;
        height: 100%;
        min-width: 1200px;
    }
    //轮播图方向按钮
    .banner-btn{
        position: absolute;
        top: 50%;
        margin-top:-30px;
        width: 60px;
        height: 60px;
        @include borradius(50%);
        cursor: pointer;
        z-index: 2;
        @include transitions(400ms);
    }
    .banner-left{
        left:0px;
        background:url(../../img/left.png) no-repeat center;
        background-color:rgba(0,0,0,.1);
        &:hover{
            background-image: url(../../img/left-hover.png);
            background-color:rgba(255,255,255,.3);
        }
    }
    .banner-right{
        right: 0;
        background:url(../../img/right.png) no-repeat center;
        background-color:rgba(0,0,0,0.1);
        &:hover{
            background-image: url(../../img/right-hover.png);
            background-color:rgba(255,255,255,.3);
        }
    }
    //控制器
    .pagination{
        width:0;
        height: 32px;
        position: absolute;
        left: 0;
        right:0;
        bottom: 20px !important;
        margin: 0 auto;
        background-color: rgba(0,0,0,.3);
        @include borradius(16px);
        z-index: 3;
        font-size: 0;
    }
    .swiper-pagination-switch,.swiper-pagination-bullet{
        display: inline-block;
        width: 12px;
        height: 12px;
        @include borradius(6px);
        background-color: rgba(255,255,255,.5);
        margin-top: 10px !important;
        opacity: 1;
        margin: 0 5px;
        cursor: pointer;
    }
    .swiper-active-switch,.swiper-pagination-bullet-active{
        width: 30px;
    }
}







//弹窗样式部分
.pop-window{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
}






//视频播放窗口  start
.video-wrapper{
    .container{
        position: relative;
        height: 100%;
    }
    .video-player{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 850px;
        height: 600px;
    }
    .video-close{
        position: absolute;
        top: -30px;
        right: -50px;
        width: 25px;
        height: 25px;
        background: url(../../img/icon-close.png) no-repeat center;
        background-size: 100%;
        @include transitions(.4s);
        cursor: pointer;
        &:hover{
            background-image: url(../../img/icon-close-hover.png);
        }
    }
}
//视频播放窗口  end







//提示框
.site-alertview{
    position: fixed;
    top: -100px;
    left: 50%;
    @include transformt(translateX(-50%));
    margin: 0 auto;
    width: auto;
    min-width: 240px;
    height: 50px;
    background-color: #fff;
    @include borradius(2px);
    overflow: hidden;
    opacity: 0;
    z-index: 9999;
    .view-icon{
        float: left;
        width: 50px;
        height: 100%;
        background:url(../../img/icon-success.png) no-repeat center;
        background-color: $acolor;
    }
    .view-text{
        float: left;
        width: auto;
        min-width: 190px;
        height: 100%;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 16px;
        line-height: 48px;
        border: 1px solid #ddd;
        color: $s3;
        overflow: hidden;
    }
}
.site-error{
    .view-icon{
        background:url(../../img/icon-error.png) no-repeat center;
        background-color: $red;
    }
}










//分页列表   pagelist
.pagenation-wrapper{
    width: 100%;
    text-align: center;
    background-color: #fff;
}
.list-page{
    display: inline-block;
    width: auto;
    height: 36px;
    line-height: 36px;
    margin: 20px auto;
    text-align: center;
    font-size: 0;
    .pull-right{
        float: right;
    }
    .pagination{
        font-size: 14px;
        vertical-align: middle;
        padding: 0 !important;
        input{
            width: 100%;
            height: 36px;
            border: 1px solid $borcolor;
            padding-left: 10px;
            padding-right: 5px;
            @include borradius(2px);
        }
    }
    ul{
        display: inline-block;
        margin-right: 2px;
        vertical-align: middle;
        li{
            float: left;
            width: 36px;
            height: 36px;
            margin-left: 2px;
            font-size: 14px;
            color: $s6;
            border: 1px solid #dddddd;
            @include borradius(2px);
            @include transitions(400ms);
            overflow: hidden;
            &:hover{
                background-color: #eeeeee;
            }
        }
        a{
            display: block;
            width: 100%;
            height: 100%;
            color: $s6;
            @include transitions(400ms);
        }
        li.active{
            color: #ffffff;
            background-color: $acolor;
            border-color: $acolor;
            a{
                color: #ffffff;
            }
        }
        li.disabled{
            cursor: not-allowed;
            &:hover{
                 background-color: transparent;
            }
            a{
                cursor: not-allowed;
            }
        }
    }
    
    //静态页面
    .pagebtn{
        display: inline-block;
        width: 72px;
        height: 36px;
        border: 1px solid #dddddd;
        @include borradius(2px);
        font-size: 14px;
        color: $s6;
        cursor: pointer;
        vertical-align: middle;
        @include transitions(400ms);
        &:hover{
            background-color: #eeeeee;
        }
    }
    .topage{
        display: inline-block;
        height: 36px;
        font-size: 0;
        vertical-align: middle;
        .topage-btn{
            display: inline-block;
            font-size: 14px;
            color: $s6;
            padding: 0 10px;
            vertical-align: middle;
            cursor: pointer;
            &:hover{
                color: $acolor;
            }
        }
        input{
            width: 36px;
            height: 36px;
            border: 1px solid #dddddd;
            @include borradius(2px);
            text-align: center;
            font-size: 14px;
            vertical-align: middle;
        }
        span{
            margin-left: 10px;
            font-size: 14px;
            vertical-align: middle;
        }
    }
}









//弹窗
.site-window{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    z-index: 999;
    .container{
        position: relative;
        height: 100%;
        &>div{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            @include borradius(4px);
            overflow: hidden;
        }
    }
    .content-title{
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #eeeeee;
        font-size: 16px;
        color: $s3;
        padding-left: 30px;
        .btn-close{
            position: absolute;
            top: 18px;
            right: 18px;
            display: inline-block;
            width: 14px;
            height: 14px;
            cursor: pointer;
            background: url(../../img/common/icon-close.png) no-repeat center;
            @include transitions(.4s);
            &:hover{
                background-image: url(../../img/common/icon-close-hover.png);
            }
        }
    }
    .content-btnlist{
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 0;
        .btn{
            display: inline-block;
            width: 50%;
            height: 100%;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
        }
        .offline-btn{
            background-color: $acolor;
        }
        .online-btn{
            background-color: $yelow;
        }
    }
}






//支付确认弹窗
.payment-view{
    width: 580px;
    height: 220px;
    background-color: #ffffff;
    .view-text{
        position: relative;
        width: 100%;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
        color: $s3;
        padding-left: 30px;
        &:before{
            display: inline-block;
            content: '';
            width: 32px;
            height: 32px;
            background: url(../../img/common/icon-alerterror.png) no-repeat center;
            vertical-align: middle;
            margin-right: 20px;
        }
    }
    .btn-wrap{
        width: 100%;
        height: 70px;
        line-height: 70px;
        text-align: center;
    }
    .pay-skip{
        font-size: 16px;
        color: $acolor;
    }
}




// 热门标签
.hot-label{
    display: inline-block;
    width: auto;
    max-width: 220px;
    height: 28px;
    line-height: 26px;
    font-size: 12px;
    color: $s6;
    border: 1px solid $borcolor;
    @include borradius(14px);
    text-align: center;
    padding: 0 10px;
    @include transitions(.5s);
    @include textoverflow;
    &:hover{
        color: $acolor;
        border-color: $acolor;
    }
    &.active{
        color: $sf;
        background-color: $acolor;
        border-color: $acolor;
    }
}